<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom title="搜索地址"></HeadCustom>
		<SearchCustom :keyword.sync="keyword" @search="getSearch" @change="getSearch" />
		<view class="mt8"></view>
		<view id="allmap" class="tui-maps"></view>
		<view class="gps-body" v-if="surroundingPois.length > 0">
			<scroll-view class="scroll" scroll-y="true" :scroll-top="scrollTop" scroll-with-animation="true" 
			:style="{height: scrollHeight+'px'}" @scroll="scroll">
				<view class="list">
					<block v-for="(item,index) in surroundingPois" :key="index">
						<view class="address-item" @click="setAddress(item)">
							<view class="tit font30 lh44">{{item.title}}</view>
							<view class="con color-6B707C font26 lh38">{{item.address}}</view>
							<view class="line"></view>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		jsBMap
	} from '@/static/js/jsBMap.js';
	import SearchCustom from '@/components/search/search-custom.vue';
	export default {
		components: {SearchCustom},
		data() {
			return {
				theme: getApp().globalData.appTheme,
						globalColor: getApp().globalData.globalColor,
				longitude: 106.382035,
				latitude: 29.609138,
				workAddress: '重庆市沙坪坝区西园北街6号',
				mapContext: null,
				ak: 'v4zr0QXB8HDbB49GYNAXu5FnEzaKAh75', // 20685b399d9c4b1f5e85a223a0e8d4b2
				marker: null,
				keyword: '',
				BMapGL: null,
				map: null,
				surroundingPois: [],
				scrollTop: 0,
				scrollHeight: 0,
				zoom: 15
			}
		},
		onLoad() {
			this.getInit()
			uni.getSystemInfo({success:(sys)=>{
				this.scrollHeight = sys.screenHeight - getApp().globalData.statusBarHeight - 400
			}})
		},
		methods: {
			getInit() {
				const that = this
				jsBMap(this.ak).then(BMapGL => {
					const th = this
					const map = new BMapGL.Map("allmap"); // 创建Map实例
					that.BMapGL = BMapGL
					that.map = map
					that.addMarker(BMapGL, map, 116.404, 39.915)
					map.enableScrollWheelZoom();
					map.addEventListener('click', function(e) {
						that.addMarker(e.point.lng, e.point.lat)
						console.log(e)
						that.mapIt(e.point.lng, e.point.lat)
					});
					map.addEventListener("dragend", function () {
						var center = map.getCenter();
						// console.log("地图中心点变更为：" + center.lng + ", " + center.lat);
						that.addMarker(center.lng, center.lat)
						that.mapIt(center.lng, center.lat)
					});
					var myCity = new BMapGL.LocalCity();
					myCity.get((result)=>{
						var cityName = result.name;
						map.setCenter(cityName);
						console.log(result)
						// alert("当前定位城市:" + cityName);
						that.addMarker( result.center.lng, result.center.lat)
						that.mapIt(result.center.lng, result.center.lat)
					});
				})
			},
			// 标注
			addMarker( lng, lat) {
				const BMapGL = this.BMapGL
				const map = this.map
				if(this.marker){
					map.removeOverlay(this.marker)
				}
				const point = new BMapGL.Point(lng, lat); // 创建点坐标
				var myIcon = new BMapGL.Icon("https://ebc-prod.cdn.benwunet.com/uni-static/location.png", new BMapGL.Size(28, 28), {
				    imageOffset: new BMapGL.Size(0,0),   // 设置图片偏移   
					imageSize: new BMapGL.Size(28, 28) // 设置图片大小
				});  
				this.marker = new BMapGL.Marker(point, {icon: myIcon});// 创建标注
				map.addOverlay(this.marker);              // 将标注添加到地图中
				map.centerAndZoom(point,18);
			},
			getSearch(){
				const _this = this
				this.scrollTop = 0
				if(this.keyword){
					const BMapGL = this.BMapGL
					var localSearch = new BMap.LocalSearch(this.map);
					//设置检索结束后的回调函数。
					localSearch.setSearchCompleteCallback(function(searchResult) {
						console.log(searchResult)
						var poi = searchResult.getPoi(0); //获得起点经纬度坐标
						if (poi != null) {
							//判断地名是否存在
							_this.addMarker(poi.point.lng, poi.point.lat) 
							_this.surroundingPois = searchResult.Yr
							//开始检索终点坐标
						} else {
							alert("请输入正确的地名！");
						}
					});
					localSearch.search(this.keyword);
				}else{
					_this.surroundingPois = []
				}
			},
			mapIt(lon, lat) {
				const _this = this
				_this.surroundingPois = []
				const BMapGL = this.BMapGL
				// 创建地理编码（地理解析器）实例      
				var myGeo = new BMap.Geocoder();
				// 根据坐标得到地址描述    下面输入坐标。
				myGeo.getLocation(new BMap.Point(lon, lat), function (result) {
					if (result) {
						_this.surroundingPois = result.surroundingPois
					}
				});
			},
			setAddress(res){
				const recruitmentTemp = getApp().globalData.recruitmentTemp
				recruitmentTemp.latitude = res.point.lat
				recruitmentTemp.longitude = res.point.lng
				recruitmentTemp.workAddress = res.address
				uni.navigateBack({
					delta: 1
				})
			},
			scroll(e){
				console.log(e)
				this.scrollTop = e.detail.scrollTop
			}

		}
	}
</script>

<style scoped lang="scss">
	.page-wrap {
		min-height: calc(100vh);
	}
	.address-item{padding: 0  40rpx;}
	.list{padding: 40rpx 0;}
	.line {
		margin: 32rpx 0;
		height: 1rpx;
		background: var(--backgroundDivisionColor);
	}
	.tui-maps {
		width: 750rpx;
		height: 600rpx;
		// position: relative;
	}

</style>